<template>
    <div>
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">{{msgData.headerTitle}}</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <msg :title="msgData.title" :description="msgData.description" :buttons="buttons" :icon="icon"></msg>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { Msg, Divider, XButton, XHeader } from 'vux'
export default {
    components: { XHeader, Msg, Divider, XButton },
    computed: mapState({ msgData: "msgData", isWeChar: "isWeChar" }),
    methods: {
        goBack() {
            this.$common.goBackUrl(this, this.msgData.gaBackUrl);
        },
        changeIcon() {
            this.$common.goBackUrl(this, this.msgData.buttonUrl);
            // if (!this.icon || this.icon === 'success') {
            //     this.icon = 'warn'
            //     return
            // }
            // if (this.icon === 'warn') {
            //     this.icon = 'info'
            //     return
            // }
            // if (this.icon === 'info') {
            //     this.icon = 'waiting'
            //     return
            // }
            // if (this.icon === 'waiting') {
            //     this.icon = 'success'
            // }
        }
    },
    data() {
        return {
            icon: 'success',
            buttons: [{
                type: 'primary',
                text: 'Primary button',
                onClick: this.changeIcon.bind(this)
            }]
        }
    },
    mounted() {
        this.buttons[0].type = this.msgData.buttonsType;
        this.buttons[0].text = this.msgData.buttonsText;
        this.$init.subPageInit(this);
    }
}
</script>